<template>  
  <div id="app">  
    <router-view></router-view>  
  </div>  
</template>
  
<script>  
export default {  
  name: 'App',  
 
  data() {  
    return {  
      todos: [],  
      oddSum: 0  
    }  
  },  
  created() {  
    console.log('App component has been created.');  
  },  
  mounted() {  
    console.log('App component has been mounted.');   
  } ,
  beforeDestroy() {
  }, 
}  
</script>
<style scoped>
body, html, #app {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body, html {
  background-color: #f5f5f5;
}
.completed {
  width: 1000px;
  text-decoration: line-through;
}

div {
  position: relative;
  margin-top: 10px;
  background-color: hsla(0, 0%, 100%, 0.663);
  font-family: Arial, sans-serif;
  max-height: 90%;
  margin: 20px auto;
  padding: 20px;
 
}

h2 {
  font-size: 2.5em;
  font-weight: 1000;
  text-align: center;
  color: #333;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.completed {
  width: 50vw; 
}
li {
  margin-bottom: 2vh;
  padding: 10px;
  border: calc(0.1vw + 1px) solid #ddd; ;
  border-radius: 5px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 calc(0.1vw + 2px) calc(0.2vw + 4px) rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

li input[type="checkbox"] {
  padding: calc(0.5vw + 5px);
  margin-bottom: calc(0.5vw + 5px);
  border-radius: calc(0.5vw + 5px)
}
li:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
li span {
  flex: 1;
}

li button {
  background-color: #d48fba;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

li button:hover {
  background-color: #c0392b;
}

li.done {
  background-color: #e9ecef;
  opacity: 0.7;
}

li.done span {
  color: #666;
}

@media (max-width: 600px) {
  div {
    max-width: 90vw;
  }
}
#app {  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;   
}  
nav {  
  background-color: #f8f9fa;  
  padding: 2vh;  
  position: fixed;  
  top: 0;  
  width: 100%;    
  z-index: 1000; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}  
nav a {  
  margin: 0 10px;  
  text-decoration: none;  
  color: #333;  
  transition: color 0.3s ease;
}
</style>